import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { Form, message, Popconfirm, Modal, Input, Select } from 'antd'
import { widgetType } from 'constants'
import PropTypes from 'prop-types'
import Style from './order.css'

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
const { Option } = Select

class RecycleForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getEcGoodsOrder: PropTypes.func,
    ecOrder: PropTypes.object,
    delEcGoodsOrder: PropTypes.func,
    delEcGoodsRequest: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {},
      searchParams: {}
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
    this.onSelectChange = this.onSelectChange.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handleSend = this.handleSend.bind(this)
    this.cancelOrder = this.cancelOrder.bind(this)
    this.handleOk = this.handleOk.bind(this)
  }

  getFilterCols () {
    return [
      {
        label: '用户编号',
        id: 'userId',
        widget: widgetType.input,
        placeholder: '请输入用户编号'
      }, {
        label: '订单编号',
        id: 'code',
        widget: widgetType.input,
        placeholder: '请输入订单编号'
      }, {
        label: '状态',
        id: 'orderStatus',
        widget: widgetType.select,
        placeholder: '请选择',
        options: [{
          text: '待支付',
          value: 0
        }, {
          text: '待发货',
          value: 10
        }, {
          text: '待收货',
          value: 20
        }, {
          text: '已完成',
          value: 30
        }, {
          text: '取消交易',
          value: 98
        }]
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '用户编号',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      }, {
        title: '订单编号',
        dataIndex: 'commodityCode',
        key: 'commodityCode',
        width: 100
      }, {
        title: '兑换时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      }, {
        title: '对应积分',
        dataIndex: 'intrgralPayAmount',
        key: 'intrgralPayAmount',
        width: 100,
        sorter: (a, b) => a.intrgralPayAmount - b.intrgralPayAmount
      }, {
        title: '物流单',
        dataIndex: 'logisticsNo',
        key: 'logisticsNo',
        width: 100,
        render: text => text || '-'
      }, {
        title: '状态',
        dataIndex: 'orderStatusName',
        key: 'orderStatusName',
        width: 100
      }, {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          return <>
            {
              record.orderStatus === '10' && <a className={Style['a-btn']} onClick={() => this.handleSend(record)}>发货</a>
            }
            {/* <Popconfirm placement='top' title='确认是否取消' onConfirm={() => this.cancelOrder(record.exchangeOrderId)}>
              <a className={Style['a-btn']}>取消</a>
            </Popconfirm> */}
            <Popconfirm placement='top' title='确认是否删除' onConfirm={() => this.handleDel(record.exchangeOrderId)}>
              <a className={Style['a-btn']}>删除</a>
            </Popconfirm>
          </>
        },
        width: 100
      }
    ]
  }

  reset () {
    this.setState({
      pageNo: 1,
      pageSize: 20,
      searchParams: {}
    })
    this.props.getEcGoodsOrder({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.setState({
      searchParams: values
    })
    this.props.getEcGoodsOrder(values)
  }

  onPageChange (pageNo, pageSize) {
    const { searchParams } = this.state
    searchParams.pageNo = pageNo
    searchParams.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getEcGoodsOrder(searchParams)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { searchParams } = this.state
    searchParams.pageNo = current
    searchParams.pageSize = pageSize
    this.props.getEcGoodsOrder(searchParams)
  }

  // 删除
  handleDel (id) {
    this.props.delEcGoodsOrder({
      exchangeOrderId: id
    })
  }

  // 取消
  cancelOrder (id) {
    this.props.cancelEcGoodsOrder({
      exchangeOrderId: id
    })
  }

  handleSend (record) {
    this.setState({
      params: record,
      showModal: true
    })
  }

  handleOk () {
    const { params } = this.state
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.exchangeOrderId = params.exchangeOrderId
        this.props.shipEcGoods(values)
      }
    })
  }

  onSelectChange (selectedRowKeys, selectedRows) {
    let restoreList = []
    selectedRows.map(item => {
      restoreList.push(item.commodityId)
    })

    this.setState({
      restoreList,
      selectedRowKeys
    })
  }

  handleCancel () {
    this.setState({
      showModal: false
    })
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getEcGoodsOrder({
      pageSize,
      pageNo
    })
  }

  componentWillReceiveProps (nextProps) {
    if (!this.props.delEcGoodsRequest && nextProps.delEcGoodsRequest) {
      message.success('删除成功')
      this.search()
    }

    if (!this.props.cancelEcGoodsRequest && nextProps.cancelEcGoodsRequest) {
      message.success('取消成功')
      this.search()
    }

    if (!this.props.sendEcGoodsRequest && nextProps.sendEcGoodsRequest) {
      message.success('发货成功')
      this.setState({
        params: null,
        showModal: false
      })
      this.search()
    }
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { pageNo, pageSize, showModal } = this.state
    const { form, ecOrder } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: ecOrder && ecOrder.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }

    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <Filters
              cols={this.getFilterCols()}
              form={form}
              search={this.search}
              reset={this.reset} />
            <CustomTable
              loading={!ecOrder} columns={this.getTableCols()}
              dataSource={(ecOrder && ecOrder.list) || []}
              pagination={pagination} />
            <Modal
              title='填写物流信息'
              visible={showModal}
              width={600}
              onOk={this.handleOk}
              destroyOnClose
              onCancel={this.handleCancel}
            >
              <Form {...formItemLayout}>
                <Form.Item label='物流公司'>
                  {getFieldDecorator('logisticsName', { rules: [{ required: true, message: '请选择物流公司' }] })(
                    <Select placeholder='请选择物流公司'>
                      <Option value='顺丰速运'>顺丰速运</Option>
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label='物流单号'>
                  {getFieldDecorator('logisticsNo', { rules: [{ required: true, message: '请输入物流单号' }] })(
                    <Input placeholder='请输入物流单号' />
                  )}
                </Form.Item>
              </Form>
            </Modal>
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  ecOrder: state.exchange.ecOrder,
  delEcGoodsRequest: state.exchange.delEcGoodsRequest,
  cancelEcGoodsRequest: state.exchange.cancelEcGoodsRequest,
  sendEcGoodsRequest: state.exchange.sendEcGoodsRequest
})
const mapDispatch = dispatch => ({
  getEcGoodsOrder: dispatch.exchange.getEcGoodsOrder,
  delEcGoodsOrder: dispatch.exchange.delEcGoodsOrder,
  cancelEcGoodsOrder: dispatch.exchange.cancelEcGoodsOrder,
  shipEcGoods: dispatch.exchange.shipEcGoods
})

const Recycle = Form.create()(RecycleForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Recycle)
)
